import React, { Component } from 'react';
import styled from 'styled-components/native';
import { Platform } from 'react-native';
import { Constants } from 'expo';

import { ToolbarButton } from '../../components/common';
import { strings, colors, dimens } from '../../utils/constants';

const TOOLBAR_HEIGHT = Platform.OS === 'ios' ? 64 : 81;
const TITLE_SIZE = Platform.OS === 'ios' ? dimens.TOOLBAR_TITLE_SIZE_IOS : dimens.TOOLBAR_TITLE_SIZE_ANDROID;

const Root = styled.View`
  flexDirection: row;
  width: 100%;
  height: ${TOOLBAR_HEIGHT};
  paddingTop: ${Constants.statusBarHeight};
  alignItems: center;
  backgroundColor: ${colors.WHITE};
  elevation: ${props => props.elevation || 0};
`;

const Center = styled.View`
  position: absolute;
  width: 100%;
  height: 100%;
  alignItems: center;
  justifyContent: center;
  bottom: 0;
`;

const CenterLayout = styled.View`
  flex: 1;
  height: 1;
  alignSelf: flex-start;
`;

const Text = styled.Text`
  fontSize: ${TITLE_SIZE};
  flex: 1;
  textAlign: center;
`;

class Toolbar extends Component {
  render() {
    const {
      headerLeft, headerCenter, headerRight, title = strings.TITLE,
      headerStyle = {}
    } = this.props;

    return (
      <Root style={{ ...headerStyle }}>
        <Center>
          {headerCenter || <Text>{title}</Text>}
        </Center>
        {headerLeft || <ToolbarButton text={strings.BACK} />}
        <CenterLayout />
        {headerRight || <ToolbarButton text={strings.MORE} />}
      </Root>
    );
  }
}

export default Toolbar;
